<template>
    <Modal v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="800">
        <el-form ref="storageProduct" :rules="rules" label-position="right" label-width="120px" :model="storageProduct">
            <el-input type="hidden" :model="storageProduct.id" />
            <el-form-item label="商品图片" prop="pics">
                <ErpImage v-model="storageProduct.pics" />
            </el-form-item>
            <el-form-item label="采购来源" prop="sourceUrl">
                <el-input size="small" v-model="storageProduct.sourceUrl" placeholder="采购来源" style="width: 240px" />
            </el-form-item>
            <el-form-item label="所在仓库" prop="warehouseId">
                <el-select size="small" v-model="storageProduct.warehouseId" placeholder="选择仓库" @change="getLocations" style="width: 240px;margin-right: 10px">
                    <el-option value="">选择仓库</el-option>
                    <el-option v-for="(st,ind) in warehouses" :key="st.id" :value="st.warehouseId" :label="st.warehouseName+','+st.linkMan">
                    </el-option>
                </el-select>
                <font color="red">*选择完不可修改</font>
            </el-form-item>
            <el-form-item label="商品名称" prop="productName">
                <el-input size="small" v-model="storageProduct.productName" placeholder="商品名称" style="width: 240px" />
            </el-form-item>
            <el-form-item label="商品编码" prop="spuCode">
                <el-input size="small" v-model="storageProduct.spuCode" placeholder="商品编码" style="width: 240px" />
            </el-form-item>
            <el-form-item label="属性/规格" prop="variationName">
                <el-input size="small" v-model="storageProduct.variationName" placeholder="如 红色X码" style="width: 240px" />
            </el-form-item>
            <el-form-item label="预警库存" prop="warnStock">
                <el-input size="small" v-model.number="storageProduct.warnStock" placeholder="预警库存" style="width: 240px" />
            </el-form-item>
            <el-form-item label="sku编码" prop="skuCode">
                <el-input size="small" v-model="storageProduct.skuCode" placeholder="F1223" style="width: 240px" />
            </el-form-item>
            <el-form-item label="长(cm)" prop="length">
                <el-input size="small" v-model="storageProduct.length" placeholder="长(cm)" style="width: 240px" />
            </el-form-item>
            <el-form-item label="宽(cm)" prop="width">
                <el-input size="small" v-model="storageProduct.width" placeholder="宽(cm)" style="width: 240px" />
            </el-form-item>
            <el-form-item label="高(cm)" prop="height">
                <el-input size="small" v-model="storageProduct.height" placeholder="高(cm)" style="width: 240px" />
            </el-form-item>
            <el-form-item label="重量(kg)" prop="weight">
                <el-input size="small" v-model="storageProduct.weight" placeholder="高(cm)" style="width: 240px" />
            </el-form-item>
            <el-form-item label="成本" prop="cost">
                <el-input size="small" v-model="storageProduct.cost" placeholder="元（￥）" style="width: 240px" />
            </el-form-item>
            <el-form-item label="采购成本" prop="baseCost">
                <el-input size="small" v-model="storageProduct.baseCost" placeholder="元（￥）" style="width: 240px" />
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button size="small" @click="cancel" style="float: left;">取消</el-button>
            <el-button size="small" type="primary" :loading="modalLoading" @click="ok">保存并关闭</el-button>
            <el-button size="small" type="success" :loading="modalLoading2" @click="ok2">保存继续</el-button>
        </div>
    </Modal>
</template>
<script>
import api from "@/api/api"
import Constants from "@/utils/constants"
export default {
    name: 'StorageProductAdd',
    data() {
        return {
            extData: {
                sessionKey: localStorage.getItem('sessionKey'),
                token: localStorage.getItem('token')
            },
            uploadJsonUrl: api.uploadJsonUrl,
            modalLoading: false,
            modalLoading2: false,
            warehouseId: null,
            shelvesId: null,
            locations: [],
            warehouses: [],
            storageProduct: {
                pics: "",
                warnStock: 5
            },
            rules: {
                warehouseId: [{ required: true, message: "必须选择仓库" }],

                stock: [{ required: true, message: "库存不能小于0" }],
                warnStock: [{ required: true, message: "预警库存不能小于0" }],
                productName: [{ required: true, message: "商品名称不能为空" }],
                // productNameEn: [{ required: true, message: "英文名称不能为空" }],
                variationName: [{ required: true, message: "货号名称不能为空" }],
                // variationNameEn: [{ required: true, message: "货号英文名称不能为空" }],
                spuCode: [{ required: true, message: "商品编码不能为空" }],

                skuCode: [{ required: true, message: "skuCode不能为空" }],
                width: [{ required: true, message: "宽不能为空" }],
                height: [{ required: true, message: "高不能为空" }],
                length: [{ required: true, message: "长不能为空" }],
            }
        };
    },
    mounted: function() {



    },
    props: [
        'show'
    ],
    methods: {
        handleSuccess(res, file) {


            this.storageProduct.pics = res.url;

        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不对',
                desc: '请选择 jpg or png 的图片.'
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超出尺寸大小',
                desc: '图片大小不能超过2M'
            });
        },


        getWarehouse: function() {
            var me = this;
            me.$http.post("/merchant/getWarehouses.do", { subdomain: localStorage.subdomain }).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.warehouses = body.obj;
                    if (me.warehouses.length == 1) {
                        me.storageProduct.warehouseId = me.warehouses[0].warehouseId;
                    }
                }

            }, response => {

            });
        },
        getLocations: function() {
            // var me = this;
            // me.locations = [];
            // me.$http.post("/merchant/getLocations.do", { warehouseId: me.storageProduct.warehouseId }).then(response => {
            //     var body = response;
            //     if (body.status == 0) {

            //         me.locations = body.obj;
            //     }

            // }, response => {

            // });
        },

        chWh: function(val) {
            // this.getLocations();
        },
        showModal: function(value) {
            if (value) {
                if (this.warehouses.length <= 0) {
                    this.getWarehouse();
                }
            } else {
                this.storageProduct = { pics: "" };
            }
        },


        ok: function() {

            var me = this;
            me.$refs['storageProduct'].validate((valid) => {

                if (valid) {
                    me.modalLoading = true;

                    me.$http.post("/storageproduct/doSave.do", this.storageProduct).then(response => {
                        var body = response;
                        me.modalLoading = false;
                        if (body.status == 0) {

                            me.$emit("ok");
                            me.sucessMessage("保存成功");
                        } else {
                            me.errorMessage(body.info);
                        }

                    }, () => {
                        me.modalLoading = false;
                    });
                } else {
                    me.errorMessage('请认真填写数据');
                }
            });
        },

        ok2: function() {

            var me = this;
            me.$refs['storageProduct'].validate((valid) => {

                if (valid) {
                    me.modalLoading2 = true;
                    me.$http.post("/storageproduct/doSave.do", this.storageProduct).then(response => {
                        var body = response;
                        me.modalLoading2 = false;
                        if (body.status == 0) {
                            me.storageProduct = { pics: "" };
                            me.successMessage("保存成功");
                        } else {
                            me.errorMessage(body.info);
                        }

                    }, () => {
                        me.modalLoading2 = false;
                    });
                } else {

                }
            });

        },
        cancel: function() {

            this.$emit("cancel");
        }
    }
}
</script>
<style scoped>
</style>